<template>
    <div>
        <h1>新增</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>房号</td>
                    <td>
                        <input type="text" v-model="data.scopeIds">
                    </td>
                </tr>
                <tr>
                    <td>联系方式</td>
                    <td>
                         <input type="text" v-model="data.phone">
                    </td>
                </tr>
                <tr>
                    <td>联系人</td>
                    <td>
                         <input type="text" v-model="data.scopeNamesa">
                    </td>
                </tr>
                <tr>
                    <td>上传图片</td>
                    <td>
                        <input type="file" @change="ImgUrlSe">
                        <img :src="'https://localhost:7294/'+data.imgURL" style="width: 60px;height: 60px;">
                    </td>
                </tr>
                <tr>
                    <td>房型</td>
                    <td>
                         <select v-model="data.scopeId">
    <option value="0">请选择</option>
    <option v-for="a in types" :value="a.scopeId">{{a.scopeName}}</option>
</select>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                         <select v-model="data.stateId">
    <option value="0">请选择</option>
    <option v-for="s in scopes" :value="s.sid">{{s.stateName}}</option>
</select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="新增" class="btn btn-success" @click="AddScopes">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(()=>{
typess();
scopess();
})
const types=ref([{
     "scopeId": 0,
    "scopeName": ""
}])
const typess=()=>{
axios.get("/api/Scope/GetScope",{params:types.value}).then(res=>{
    types.value=res.data;
})
}
const scopes=ref([{
    "sid": 0,
    "stateName": ""
}])
const scopess=()=>{
axios.get("/api/State/GetState",{params:scopes.value}).then(res=>{
    scopes.value=res.data;
})
}


const ImgUrlSe=(e:any)=>{
    var f=e.target.files[0];
    var fa=new FormData();
    fa.append("file",f);

    axios.post("/api/Lode/UPFile",fa).then(res=>{
data.value.imgURL=res.data;
    })
}

const data=ref({
      "id": 0,
  "scopeIds": "",
  "stateId": 0,
  "isDel": true,
  "isDeldate": null,
  "phone": "",
  "scopeNamesa": "",
  "imgURL": "",
  "scopeId": 0
})

const AddScopes=()=>{
    axios.post("/api/ScopeId/AddScopeid",data.value).then(res=>{
        if(res.data==-1)
    {
        alert("房号不能重复");
        return;
    }
    if(res.data>0)
    {
        alert("新增成功");
        router.push({path:"/"})
    }
    else
    {
     alert("新增失败");   
    }
    })
}
</script>

<style scoped>

</style>